import DatePicker from "components/antd-compatible/date-picker";
import React, { Component, PropTypes } from 'react'
import { messages } from "share/common";
import moment from "moment";
import {Alert, Badge, Button,  Form, Radio} from "antd";
import Importer from "components/template/importer/index";
import config from "config";

class PayingFooter extends Component {

  state = {
    key: ''
  };

  onCancel = () => {
    const { resetFields } = this.props.form, { onCancel } = this.props;
    resetFields();
    onCancel();
  };

  render() {
    const { key } = this.state;
    const { getFieldsValue, getFieldDecorator, validateFields } = this.props.form;
    let values = getFieldsValue();
    let failData = values.failData || moment(new Date()), isDetail = values.isDetail === '2';
    return (
      <div style={{display: 'inline-block'}}>
        <Importer
          modalOptions={{title: messages('finance-4.key124')/*落地文件导入*/, afterClose: this.onCancel}}
          triggerNode={[
            <Button type='primary' style={{marginRight: 10}} onClick={() => {this.setState({ key: 'success'})}}>
              {messages('finance-4.key125')/*导入确认成功*/}
            </Button>,
            <Button type='primary' onClick={() => {this.setState({ key: 'error'})}}>
              {messages('finance-4.key126')/*导入确认失败*/}
            </Button>
          ]}
          uploadOptions={{
            listenUrl: `${config.budgetUrl}/api/budget/batch/transaction/logs`,
            uploadUrl: key === 'success' ?
              `/payment/api/cash/transaction/details/paid/success/by/document?payDate=${new Date(failData).format('yyyy-MM-dd') === new Date().format('yyyy-MM-dd') ?
                new Date().format('yyyy-MM-dd hh:mm:ss') : new Date(failData).format('yyyy-MM-dd 23:59:59')}&isDetail=${isDetail}` :
              `/payment/api/cash/transaction/details/paid/fail/by/document?isDetail=${isDetail}`,
            accept: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          }}
          onValidate={() => {return validateFields((err) => { if(err) return false; else return true; })}}
          errorColumns={[
            {title: messages('finance-4.key59')/*单据编号*/, dataIndex: 'documentNumber', width: '20%'},
            {title: messages('finance-4.key127')/*错误信息*/, dataIndex: 'errorMsg'}
          ]}
          errorTableData={data => data.paymentFailDTOS || []}
          uploadResultOptions={{
            getErrorTableVisible: result => result && result.failureEntities > 0
          }}
          parseUploadResult={uploadResult => messages('finance-4.key128',{arg1: uploadResult.successEntities||0,arg2: uploadResult.failureEntities||0})/*支付成功：{arg1}条，支付失败：{arg2}条*/}
          infoMessage={
            <Alert
              showIcon
              type="warning"
              style={{marginBottom: 20}}
              message={
                <div>
                  <span style={{ marginRight: 16, fontSize: 14 }}>{messages('finance-4.key129')/*将付款状态更改为*/}</span>
                  <Badge status={key} text={key === 'success' ? messages('finance-4.key96')/*支付成功*/ : messages('finance-4.key130')/*支付失败*/}/>
                </div>
              }
              description={
                <div style={{ color: 'red' }}>
                  {key === 'success' ?
                  messages('finance-4.key131')/*请通过网银或询问银行的方式确认该笔付款已成功转账*/ :
                  messages('finance-4.key132')/*请务必向银行确认该付款支付失败，以免产生重复支付*/}
                  <div>{messages('finance-4.key133')/*为保证导入结果正确，请不要修改下载的报盘文件的文件名*/}</div>
                </div>
              }
            />
          }
          template={
            <Form className='left-template'>
              <h3 className='left-template-title'>{messages('finance-4.key134')/*选择导入模板*/}</h3>
              <p>1. {messages('finance-4.key135')/*选择模板类型*/}</p>
              <Form.Item style={{marginBottom: 20}}>
                {getFieldDecorator('isDetail', {
                  rules: [{ required: true, message: messages('finance-4.key136')/*请选择temp*/ }],
                  initialValue: '1'
                })(
                  <Radio.Group>
                    <Radio value={'1'}>{messages('finance-4.key137')/*报盘文件*/}</Radio>
                    <Radio value={'2'}>{messages('finance-4.key138')/*报盘明细*/}</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
              {
                key === 'success' && (
                  <Form.Item>
                    <p>2. {messages('finance-4.key139')/*选择实际付款日期*/}</p>
                    {getFieldDecorator('failData', {
                      rules: [{ required: true, message: messages('finance-4.key136')/*请选择temp*/ }],
                      initialValue: moment(new Date())
                    })(
                      <DatePicker
                        format="YYYY-MM-DD"
                        placeholder={messages('finance-4.key136')/*请选择temp*/}
                        disabledDate={current => current && current.valueOf() > Date.now()}
                        allowClear={false}
                      />
                    )}
                  </Form.Item>
                )
              }
            </Form>
          }
        />
      </div>
    )
  }

  static propTypes = {
    onCancel: PropTypes.func
  }

}

const wrappedPayingFooter = Form.create()(PayingFooter);
export default wrappedPayingFooter;
